<!-- ******监控轮播图****** -->
<template>
  <div class="first-hgcpkc">
    <div class="title-box">
      <div class="title">
        <img src="../../../../assets/img/gongqifa.png" alt="" />
        监控轮播图
      </div>
      <div class="shuffling" @click="btnPressed($event)">
        <div>
          <img src="../../../../assets/img/gongqifa.png" alt="" />
        </div>
        <div>
          <img src="../../../../assets/img/dianzhan.png" alt="" />
        </div>
        <div>
          <img src="../../../../assets/img/fadianliang.png" alt="" />
        </div>
        <div>
          <img src="../../../../assets/img/huanbao.png" alt="" />
        </div>
        <div>
          <img src="../../../../assets/img/tubiao-.png" alt="" />
        </div>
        <div>
          <img src="../../../../assets/img/yuanliaoxiaohao.png" alt="" />
        </div>
        <div>
          <img src="../../../../assets/img/huanbao.png" alt="" />
        </div>
        <div>
          <img src="../../../../assets/img/gongqifa.png" alt="" />
        </div>
        <div>
          <img src="../../../../assets/img/gongqifa.png" alt="" />
        </div>
      </div>
      <div class="monitoring">
        <div class="monitoring-figure">
          <img :src="imgUrl" alt="暂无">
        
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import "echarts-liquidfill";
import * as echarts from "echarts";

export default {
  name: "first-hgcpkc",
  data(){
return{
  data:'',
  imgUrl:''
}
  },

  mounted() {
    // this.btnPressed()
    let img1 = require('@/assets/img/gongqifa.png')
    let img2 = require('@/assets/img/dianzhan.png')
    let img3 = require('@/assets/img/fadianliang.png')
    let img4 = require('@/assets/img/huanbao.png')
    let img5 = require('@/assets/img/tubiao-.png')
    let img6 = require('@/assets/img/yuanliaoxiaohao.png')
    let img7 = require('@/assets/img/huanbao.png')
    let img8 = require('@/assets/img/gongqifa.png')
    let img9 = require('@/assets/img/gongqifa.png')
    let temArr = [img1, img2, img3, img4, img5, img6, img7, img8, img9]
    let index = 0
    setInterval(() => {
      this.imgUrl = temArr[index]
      index++
      if (index === temArr.length) index = 0
    }, 60000)
  },
  methods: {
btnPressed(event){
  this.imgUrl = event.target.src
	//  console.log(event.target.src,'打印轮播图SRC','分割',this.imgUrl)
  // if( ){

  // }
  
}
  },
};
</script>

<style lang="scss" scoped>
.first-hgcpkc {
  width: 100%;
  height: 3240px;
  //    background-image: url(../../../../assets/img/newBg05.png);
  // background-size: 100% 100%;
  .title-box {
    width: 100%;
    height: 100%;
    .title {
      margin-top: 110px;
      width: 100%;
      padding-left: 65px;
      height: 217px;
      line-height: 217px;
      font-size: 145px;
      background-color: #1a2a44;
      color: #e3f6fa;
      //   letter-spacing: 10px;

      img {
        width: 145px;
      }
    }
    .shuffling {
      margin-top: 50px;
      width: 100%;
      height: 1222px;

      border: 20px solid #315396;
      border-radius: 2%;
      div {
        border-radius: 3%;
        border: 15px solid #315396;
        float: left;
        margin: 20px 0px 0px 20px;
        width: 680px;
        height: 370px;
        background-color: #1a2a44;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .monitoring {
      margin-top: 135px;
      width: 100%;
      height: 1285px;
      background-color: #1142a6;
      border: 20px solid #315396;
      border-radius: 2%;
      .monitoring-figure {
        width: 100%;
        height: 1285px;
        font-size: 200px;
        color: #fff;
        text-align: center;
        line-height: 1285px;
        img{
          width: 80%;
          height: 1200px;
          text-align: center;
          line-height: 1200px;
        }
      }
    }
  }
}
</style>
